<html>
<head>
    <script type="text/javascript" src="{ResourceUrl}/js/jquery-1.6.1.min.js"></script>
</head>
<body>
Tạo thư mục mới: <input type="text" name="folder" id="folder" />
<button onclick="addNewFolder()">Tạo!</button>
<br />
<form id="file-upload-form" method="post" enctype="multipart/form-data" target="file-upload-frame" action="{BaseUrl}/file/upload">
    Upload file: <input type="file" name="file" id="file" />
    <input id="file-upload-form-parentId" type="hidden" name="parentId" value="" />
    <button onclick="uploadFile()">Upload!</button>
</form>
<iframe style="display: none;" id="file-upload-frame" name="file-upload-frame"></iframe>

<div id="tree">
    <div id="tree-list0"><button onclick="listSubfolder(0)">+</button><a onclick="browseFolder(0)" href="#">/</a></div>
</div>

<div id="main"></div>

<script type="text/javascript">
    currentFolderId = {currentFolderId};
    browseFolder(currentFolderId);
    $(document).ready(function()    {
        $('#tree').append('<div id="tree-list0"></div>');
        $.get('{BaseUrl}/folder/listTree', {}, function(ret) {
            ret = ret.result;
            for(var i in ret)   {
                var current = ret[i];
                var id = current.parentId;
                while(true) {
                    if ($('#tree-list'+id).length > 0)    {
                        break;
                    }
                    id = current.parentId;
                }
                $('#tree-list'+id).append('<div style="margin-left: '+((current.depth)*50)+'px" id="tree-list'+current.id+'"><button onclick="listSubfolder('+current.id+')">+</button><a onclick="browseFolder('+current.id+')" href="#">'+current.name+'-'+current.depth+'</a></div>');
            }
        }, 'json');
    });
    
    function initUploader() {
        var fr = $('#file-upload-frame');
        $(fr).one('load', function() {
            var response = fr.contents().find('body').html();
            var ret = $.parseJSON(response).result;
            if (ret.exception == 1) {
                alert(ret.message);
                return;
            }
            if (ret == 1) {
                alert('success');
            }
        });
    }
    
    function uploadFile()   {
        initUploader();
        $('#file-upload-form-parentId').val(currentFolderId);
        $('#file-upload-form').submit();
    }
    
    function listSubfolder(id)  {
        $.get('{BaseUrl}/folder/listSubtree/'+id, {}, function(ret) {
            ret = ret.result;
            if (ret.exception == 1) {
                alert(ret.message);
                return;
            }
            for(var i in ret)   {
                var current = ret[i];
                $('#tree-list'+id).append('<div style="margin-left: '+((current.depth)*50)+'px" id="tree-list'+current.id+'"><button onclick="listSubfolder('+current.id+')">+</button><a onclick="browseFolder('+current.id+')" href="#">'+current.name+'-'+current.depth+'</a></div>');
            }
        }, 'json');
    }
    
    function browseFolder(id) {
        $.get('{BaseUrl}/folder/browse/'+id, {}, function(ret) {
            ret = ret.result;
            if (ret.exception == 1) {
                alert(ret.message);
                return;
            }
            var folders = ret.folders;
            var files = ret.files;
            $('#main').html('');
            for(var i in folders)   {
                var current = folders[i];
                $('#main').append('<span>'+current.name+'(folder)</span>');
            }
            $('#main').append('<br />');
            for(var i in files)   {
                var current = files[i];
                $('#main').append('<span><a href="{ResourceUrl}/'+current.path+'">'+current.name+'</a>(file)</span>');
            }
            currentFolderId = id;
        }, 'json');
    }
    
    function addNewFolder() {
        var folderName = $('#folder').val();
        $.post('{BaseUrl}/folder/add/'+folderName+'/'+currentFolderId, {}, function(ret) {
            ret = ret.result;
            if (ret.exception == 1) {
                alert(ret.message);
                return;
            }
            if (ret == 1)
                alert('Success');
            else
                alert(ret);
        }, 'json');
    }
</script>
</body>
</html>